//列表
.list {
    &-item {
        position: relative;
        display: flex;
        align-items: center;
        height: 56px;
        padding: 0 22px;

        &:after {
            content: '';
            position: absolute;
            left: 32px;
            right: 32px;
            bottom: 0;
            height: 1px;
            background: rgba(0, 0, 0, .1);
        }

        &-label {
            display: flex;
            align-items: center;
            width: 12%;
            height: 100%;
            padding: 0 10px;
            color: rgba(0, 0, 0, .7);
            justify-content: flex-end;

            &-title {
                flex: 1;
                color: #000;
                justify-content: flex-start;
                min-width: 150px;
            }

            &-size {
                width:110px;
                min-width: 110px;
            }

            &-template {
                width:130px;
                min-width: 130px;
            }

            &-title {
                flex:1;
            }

            &-time {
                width: 200px;
                min-width: 200px;
            }

            &-action {
                width: 160px;
                min-width: 160px;
            }
        }

        &-text {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            .icon + & {
                padding-left: 5px;
            }
        }

        &:hover {
            background: rgba(81, 90, 89, .05);
        }

    }
}

//文件后缀
.file-sub {
    display: inline-block;
    vertical-align: sub;
    width: 42px;
    height: 20px;
    font-size: 12px;
    border-radius: 4px;
    color: #000;
    border: 1px solid currentColor;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    text-align: center;

    &- {
        display: none;
    }

    &.html,
    &.htm,
    &.php,
    &.c,
    &.cpp,
    &.css,
    &.scss,
    &.js,
    &.vbs,
    &.sh,
    &.java {
        color: green;
    }

    &.jpg,
    &.jpeg,
    &.gif,
    &.bmp,
    &.wmv,
    &.avi,
    &.mp4,
    &.png {
        color: dodgerblue;
    }

    &.txt,
    &.json,
    &.xml,
    &.yaml,
    &.conf,
    &.ini {
        color: #bb5d0d;
    }

    &.doc,
    &.docx,
    &.xls,
    &.xlsx,
    &.ppt,
    &.pptx,
    &.et {
        color: #C828BD;
    }
}


.sort-title:hover {
    background: rgba(81, 90, 89, .1);
    text-decoration: none;
}

//文件列表
.list-files {
    
    &-head {
        //height: 88px;
        padding-right: 8px;

        .list-item {
            height: 40px;
            
            .list-item-label {
                span {
                    font-weight: bold;
                }
            }
            
            &-label {
                color: rgba(0, 0, 0, 1);

                &-title {
                    padding-left: 16px;
                }
            }

            &:hover {
                background: transparent;
            }
        }

        .button-bar {
            padding: 10px 30px;
            text-align: right;
            
            .button {
                border-radius: 5px;
                padding: 5px 10px;
                border: solid 1px gray;
                color: #4b4b4b;
                
                &:hover {
                    color: #3989ef;
                    border-color: #3989ef;
                }
            }
        }
    }

    &-body {
        flex: 1;
        overflow-y: scroll;

        .list-item.empty {
            justify-content: center;
            color: gray;
            font-size: 12px;
            font-style: italic;
        }
        
        .list {
            .list-item {
                .action-ground {
                    .delete {
                        color: deeppink;
                    }
                    
                    .menu-dropdown {
                        transform: translateY(-5px);
                        z-index:99;
                    }
                }

                &:last-child {
                    .action-ground {
                        .menu-dropdown {
                            transform: translateY(calc(-100% - 26px));
                        }
                    }
                }

                &:nth-child(2),
                &:nth-child(3),
                &:nth-child(4),
                &:first-child {
                    .action-ground {
                        .menu-dropdown {
                            transform: translateY(-5px);
                        }
                    }
                }
                
                &.disabled {
                    color:#b3b1b1 !important;
                    text-decoration: line-through;
                    
                    span {
                        color:#b3b1b1 !important;
                    }
                }
            }
        }
        
    }

    &-footer {
        height: 56px;
        padding: 0 32px;
        line-height: 56px;
        text-align: center;
    }
}

